iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1
Modern Web

30天Pixi帶你飛上天系列 第 6

Day6 連續動圖spriteSheet part2 加上 drag事件

  • 分享至 

  • xImage
  •  

前一篇只有提到如何使用json載入spriteSheet並且播放,本篇則是關於如何去控制spriteSheet,範例延續上一篇繼續使用

範例

相關屬性:

  • play()stop() 播放控制
    上一篇有使用到,預設是stop

  • animationSpeed
    上一篇也有用到,控制播放速度

  • gotoAndPlay()gotoAndStop()
    本篇會提到,用來設定起始/結束播放時的影格

  • totalFrames 回傳全部的影格數量

  • loop 重複播放,預設是true

  • onLoop 重複播放時呼叫

  • onCompleteloop = false 時,跑到最後一個影格時呼叫

let anim; //和上篇不同 要先把anim 先拿出來定義 , 在偵聽事件的時候才找的到人

PIXI.loader.add('sheet.json').load(onAssetsLoaded);

function onAssetsLoaded() {
let frames = [];

for (let i = 1; i < 11; i++) {
  let val = i;

  frames.push(PIXI.Texture.fromFrame(val + '.png'));
}
anim = new PIXI.extras.AnimatedSprite(frames);
anim.x = app.screen.width / 2;
anim.y = app.screen.height / 2;
anim.anchor.set(0.5);
anim.animationSpeed = 0.5;
app.stage.addChild(anim);

//以上都跟上篇一樣

anim.interactive = true; //設定為可互動
anim.buttonMode = true; // 設定cursor: pointer

// 監聽drag事件
anim.on('pointerdown', onDragStart)
  .on('pointerup', onDragEnd)
  .on('pointerupoutside', onDragEnd)
  .on('pointermove', onDragMove);
}

pointerdown pointerup pointerupoutside pointermove 系列事件是直接包含touch和mouse兩種事件, 就不用特別設定了~

如果要分開寫的話就改用以下:
mouse事件

 .on('mousedown', function(){})
 .on('mouseup', function(){})
 .on('mouseupoutside', function(){})
 .on('mousemove', function(){});

touch事件

 .on('touchstart', function(){})
 .on('touchend', function(){})
 .on('touchendoutside', function(){})
 .on('touchmove', function(){});

最後就是drag事件的內容

function onDragStart() {
    // 將對象dragging設定為TRUE,為TRUE時move事件才允許移動
    this.dragging = true; 
  }
  function onDragEnd() {
    this.dragging = false;
    anim.stop(); // 拖曳結束後停止動畫
    anim.gotoAndStop(4); // 拖曳結束後會停在第五個影格
  }
  function onDragMove(event) {
    if (this.dragging) { // 為TRUE時move事件才允許移動
      anim.play(); // 拖曳時開始播放動畫
      let newPosition = event.data.global; 
      // 抓事件的position 並設定到對象的x,y
      this.x = newPosition.x;
      this.y = newPosition.y;
    }
  }

這樣範例就會在拖曳時走路,放下後停止啦~


上一篇
Day5 連續動圖spriteSheet 使用loader json載入
下一篇
Day7 PIXI.extras.TilingSprite/在pixi中實現background-repeat
系列文
30天Pixi帶你飛上天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
UT
iT邦新手 5 級 ‧ 2018-10-21 02:27:39

/images/emoticon/emoticon24.gif好可愛RRR

明天的更可愛喔喔喔喔喔喔(自己講

我要留言

立即登入留言